<template>
  <el-button type="primary" @click="open()">开的弹窗</el-button>
  <ad-dialog-form v-bind="dialogFormConfig" ref="dialogForm"></ad-dialog-form>
</template>
<script lang="ts" setup>
import { ref, reactive } from "vue";

import {
  bankCardFormat,
  cardFormat,
  isCard,
  isMobile,
  isSMs,
  mobileFormat,
  noNumericToBlank,
} from "@fe-hl/utils";

// 快捷选择
const shortcuts = [
  {
    text: "一周内",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
      return [start, end];
    },
  },
  {
    text: "一个月内",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
      return [start, end];
    },
  },
  {
    text: "三个月内",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
      return [start, end];
    },
  },
  {
    text: "一年内",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 365);
      return [start, end];
    },
  },
];
// 直接范围一年内，不能过过当前时间
const disabledDate = (time: Date) => {
  const curDate = new Date().getTime();
  const three = 365 * 24 * 3600 * 1000;
  const threeMonths = curDate - three;
  return time.getTime() > Date.now() || time.getTime() < threeMonths;
};

let dialogForm = ref();

const dialogFormConfig = reactive({
  title: "新增",
  formConfig: {
    handlerUpload: async (file, formConfig) => {
      console.log(formConfig);
      let formData = new FormData();
      formData.append("file", file.file);
      return Promise.resolve();
    },
    handlerSubmit: (formModels) => {
      console.log(formModels);
      return Promise.resolve();
    },
    formModelValues: {
      mobilePhone: "17621959589",
    },
    formConfigList: [
      {
        componentType: "text",
        label: "手机号格式化",
        type: "text",
        placeholder: "请输入手机号",
        key: "mobilePhone",
        formatter: mobileFormat,
        maxlength: 13,
        rules: [
          {
            required: false,
            message: "请输入合法的11位手机号",
            validator: (rule, value, callback) => {
              if (!isMobile(value.replace(/\s/gi, ""))) {
                callback(new Error("请输入合法的11位手机号"));
              } else {
                callback();
              }
            },
          },
        ],
      },
      {
        componentType: "text",
        label: "身份证",
        type: "text",
        placeholder: "请输入身份证",
        key: "card",
        formatter: cardFormat,
        maxlength: 20,
        rules: [
          {
            required: false,
            message: "请输入合法18位身份证号",
            validator: (rule, value, callback) => {
              if (!isCard(value.replace(/\s/gi, ""))) {
                callback(new Error("请输入合法18位身份证号"));
              } else {
                callback();
              }
            },
          },
        ],
      },
      {
        componentType: "text",
        label: "银行卡号",
        type: "text",
        placeholder: "请输入银行卡号",
        key: "bankCard",
        formatter: bankCardFormat,
        maxlength: 24,
        rules: [{ required: true, message: "请输入银行卡号" }],
      },
      {
        label: "验证码",
        componentType: "sms",
        type: "text",
        formatter: noNumericToBlank,
        placeholder: "请输入验证码",
        beforeValidateKey: ["mobilePhone"],
        key: "smsCode",
        handlerCountdown: (countdown) => {
          countdown();
        },
        maxlength: 6,
        rules: [
          {
            required: false,
            message: "请输入6位数字验证码",
            validator: (rule, value, callback) => {
              if (!isSMs(value)) {
                callback(new Error("请输入6位数字验证码"));
              } else {
                callback();
              }
            },
          },
        ],
      },
      {
        componentType: "text",
        type: "text",
        label: "商户号",
        formatter: noNumericToBlank,
        placeholder: "请输入商户号",
        key: "mercId",
        rules: [{ required: false, message: "请输入商户号" }],
      },
      {
        componentType: "switch",
        label: "状态",
        defaultValue: true,
        key: "off",
      },
      {
        componentType: "checkbox",
        label: "复选",
        key: "checkboxs",
        rules: [{ required: false, message: "请选择复选框组" }],
        options: [
          {
            label: "男",
            value: 1,
          },
          {
            label: "女",
            value: 2,
          },
        ],
      },
      {
        componentType: "radio",
        label: "单选",
        key: "radio",
        defaultValue: "m",
        rules: [{ required: false, message: "请选择单选" }],
        options: [
          {
            label: "男",
            value: "s",
          },
          {
            label: "女",
            value: "m",
          },
        ],
      },
      {
        componentType: "stepper",
        label: "步进器",
        key: "stepper",
      },
      {
        componentType: "rate",
        label: "评分",
        key: "rate",
      },
      {
        componentType: "slider",
        label: "滑块",
        key: "slider",
      },
      {
        componentType: "select",
        label: "选择城市",
        placeholder: "选择城市",
        key: "city",
        confirmCallback: (formModel, formModels, opt) => {
          console.log(formModel);
          console.log(formModels);
          console.log(opt);
        },
        options: [
          { label: "杭州", value: "Hangzhou" },
          { label: "宁波", value: "Ningbo" },
          { label: "温州", value: "Wenzhou" },
          { label: "绍兴", value: "Shaoxing" },
          { label: "湖州", value: "Huzhou" },
        ],
        rules: [{ required: false, message: "选择城市" }],
      },
      {
        componentType: "select",
        label: "选择城市模糊查询",
        placeholder: "选择城市",
        key: "cityFuzzy",
        remote: true,
        getOptions: () => {
          let list = [
            { label: "杭州1222", value: "Hangzhou" },
            { label: "宁波2", value: "Ningbo" },
            { label: "温州", value: "Wenzhou" },
            { label: "绍兴", value: "Shaoxing" },
            { label: "湖州", value: "Huzhou" },
          ];
          return Promise.resolve(list);
        },
        confirmCallback: (formModel, formModels, opt) => {
          console.log(formModel);
          console.log(formModels);
          console.log(opt);
        },
        rules: [{ required: false, message: "选择城市" }],
      },
      {
        componentType: "date",
        type: "daterange",
        dateFormat: "YYYY-MM-DD",
        label: "时间选择",
        placeholder: "选择时间选择",
        shortcuts: shortcuts,
        disabledDate: disabledDate,
        key: "dateRange",
        rules: [{ required: false, message: "选择时间选择" }],
      },
      {
        componentType: "uploader",
        label: "文件上传",
        maxCount: 5,
        key: "uploader",
        tip: "jpg/png files with a size less than 2000KB",
        rules: [{ required: false, message: "请选择文件上传" }],
        beforeRead: (file) => {
          console.log(file);
          // 可拦截
          return true;
        },
      },
    ],
  },
});

let open = () => {
  dialogForm.value.open();
};
</script>
